import React from 'react';
import { useEffect, useState } from 'react';
import { getProlabel, getProTradeList, getProselectList ,delTables,delLists} from '@/services/index';
import { RootObject, RootObject2, RootObject3 } from '@/utils';
import { Table, Button, Input, Breadcrumb } from 'antd'
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import {observer} from 'mobx-react-lite';
import useStore from '@/context/useStore';

import './proManagement.less';
// selectMajorStationList
// selectTradeList

// 搜索需要请求的数据
// isAsc: desc
// pageNum: 1
// pageSize: 10
// sxtype: 
// status: 0
// proName: 1111
// newProjectList: 0
// specialtyTag: 
// industryTag: 

const statuss = ['全部', '草稿', '已发布', '待审核', '已驳回'];
const types = ['全部', '生产实训', '教学实训', '专业群实训'];


const ProManagement: React.FC = () => {

    let [MajorList, SetMajorList] = useState<RootObject[]>([]);  // 专业
    let [TradeList, SetTradeList] = useState<RootObject2[]>([]); // 行业
    let [curstatus, setCurstatus] = useState(0);
    let [curtypes, setCurtypes] = useState(0);
    let [Marjorvalue, setMarjorvalue] = useState('');
    let [Tradevalue, setTradevalue] = useState('');
    let [ProselectList, setProselectList] = useState<RootObject3[]>([]);
    let [isMyInfo, setMyInfo] = useState(false);     // 选择框
    let [title, setTitle] = useState('');      // 搜索框
    let [searchTitle, setSearchTitle] = useState('');
    let [delId,setDelId] = useState('');
    
    const columns = [
        {
            title: '项目名称',
            dataIndex: 'proname',
            align: "center"
        },
        {
            title: '版本',
            dataIndex: 'version',
            align: "center"
        },
        {
            title: '任务数量',
            dataIndex: 'taskCount',
            align: "center"
        },
        {
            title: '所属专业',
            dataIndex: 'trade',
            align: "center"
        },
        {
            title: '所属行业',
            dataIndex: 'major',
            align: "center"
        },
        {
            title: '实训类型',
            dataIndex: 'sxtype',
            align: "center",
            render: (sxtype: string) => {
                return <span>{types[Number(sxtype)]}</span>
            }
        },
        {
            title: '推荐完成天数',
            dataIndex: 'subjecttime',
            align: "center"
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            align: "center"
        },
        {
            title: '演示',
            dataIndex: 'richText',
            align: "center",
            render: () => {
                return <span>查看</span>
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: "center",
            render: (status: string) => {
                return <span className={status == '2' ? 'sends' : ''}>{statuss[Number(status)]}</span>
            }
        },
        {
            title: '操作',
            dataIndex: 'status',
            align: "center",
            render: (status: string, ProselectList: RootObject3 ) => {
                if (status === '1') {
                    return <div className='active'>
                        <Link to={`/teachers/proManagement/addProject?versionId=${ProselectList.versionId}&proId=${ProselectList.id}&see=false`} ><FormOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} /></Link>
                        <DeliveredProcedureOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        <DeleteOutlined onClick={()=>{setDelId(ProselectList.versionId)}} style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                } else if (status === '2') {
                    return <div className='active'>
                        <EyeOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                } else if (status === '3') {
                    return <div className='active'>
                        <EyeOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        <RollbackOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                } else if (status === '4') {
                    return <div className='active'>
                        <DeleteOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                }
            }
        },
    ];


    // 发起请求
    useEffect(() => {
        // 获取专业
        getProlabel().then(res => {
            // console.log('res...',res)
            if (res.code === 200) {
                SetMajorList(res.data);
            }
        });
        // 获取行业
        getProTradeList().then(res => {
            // console.log('...trade',res)
            if (res.code === 200) {
                SetTradeList(res.data);
            }
        });
        // 获取筛选表格列表
        getProselectList({ isAsc: 'desc', pageNum: 1, pageSize: 10, sxtype: 0, status: 0, proName: '', newProjectList: 0 }).then(res => {
            if (res.rows) {
                setProselectList(res.rows);
            }
        });
    }, [])

    

    // 发生改变从新请求
    useEffect(() => {
        let params = { isAsc: 'desc', pageNum: 1, pageSize: 10, sxtype: curtypes, status: curstatus, proName: searchTitle, newProjectList: 0, specialtyTag: Marjorvalue, industryTag: Tradevalue }
        getProselectList(params).then(res => {
            if (res.rows) {
                setProselectList(res.rows);
            }
        });
        
    }, [curstatus, curtypes, Marjorvalue, Tradevalue, searchTitle])
    
    // 删除
    useEffect(()=>{
        delTables(delId);
        setProselectList(ProselectList.filter(item=>item.versionId != delId));
    },[delId])

    return <div className='proManagement'>
        <div className="header">
            <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
                <Breadcrumb.Item>项目</Breadcrumb.Item>
                <Breadcrumb.Item>项目管理</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className="main">
            <section className='main_head'>
                <section className='main_head_types'>
                    <span>实训类型：</span>
                    {
                        types.map((item, index) => {
                            return <span key={index} className={curtypes === index ? 'active' : ''} onClick={() => { setCurtypes(index) }}>
                                {item}
                            </span>
                        })
                    }
                </section>
                <section className='main_head_major'>
                    <span>专业：</span>
                    <span className={Marjorvalue == '' ? 'active' : ''} onClick={() => { setMarjorvalue('') }}>全部</span>
                    {
                        MajorList.map((item, index) => {
                            return <span key={index} className={Marjorvalue == item.value ? 'active' : ''} onClick={() => { setMarjorvalue(item.value); console.log('Marjorvalue', Marjorvalue) }}>
                                {item.label}
                            </span>
                        })
                    }
                </section>
                <section className='main_head_trade'>
                    <span>行业：</span>
                    <span className={Tradevalue == '' ? 'active' : ''} onClick={() => { setTradevalue('') }}>全部</span>
                    {
                        TradeList.map((item, index) => {
                            return <span key={index} className={Tradevalue == item.value ? 'active' : ''} onClick={() => { setTradevalue(item.value) }}>
                                {item.label}
                            </span>
                        })
                    }
                </section>
                <section className='main_head_status'>
                    <span>状态：</span>
                    {
                        statuss.map((item, index) => {
                            return <span key={index} className={curstatus === index ? 'active' : ''} onClick={() => { setCurstatus(index) }}>
                                {item}
                            </span>
                        })
                    }
                </section>
            </section>
        </div>
        <section className='footer'>
            <div className="search">
                <span></span>
                <div>
                    <span> <input type="checkbox" checked={isMyInfo} onChange={e => { console.log(e.target.checked); setMyInfo(e.target.checked) }} />仅看最新版</span>
                    <span> <Input placeholder="搜索项目名称" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                        if (e.keyCode === 13) {
                            setSearchTitle(title)
                        }
                    }} /></span>
                    <Link to='/teachers/proManagement/addProject?see=false'>
                        <Button
                            type="primary"
                            style={{ margin: "-4px 30px 0 15px", width: "100px", fontSize: "15px", height: "35px", lineHeight: "35px", textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>+添加岗位</Button>
                    </Link>
                </div>
            </div>
            <Table rowKey="id" dataSource={ProselectList} columns={columns} pagination={{pageSize:10,total:ProselectList.length}} />
        </section>
    </div>
}

export default observer(ProManagement);

